<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="<s:url value="/css/style.css"/>" rel="stylesheet"
			type="text/css" />
		<link href="<s:url value="/css/jquery.css"/>" rel="stylesheet"
			type="text/css" />
		<script type="text/javascript" src="<s:url value="/js/jquery.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/js/jquery-ui.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/js/common.js"/>"></script>
		<script type="text/javascript"
			src="<s:url value="/js/jquery.blockUI.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/js/jquery.validate.js"/>"></script>
		<script type="text/javascript">
	   function doSelectClassType() {
			$("#classTypeList option:selected").each( function() {
			    if ($(this).val()==-1){
			        return;
			    }
				$("#classTypename").val($(this).text());
				$("#classTypeId").val($(this).val());
			});
	    }
	    function doAddClassUnit() {
			   	var v = $("#upperLimit").val();
			  	var name = $("#classTypename").val();
				var reg = new RegExp("^[0-9]+(.[0-9]{2})?$", "g");
				if (!name||!reg.test(v)) {
					alert("please input upper limit");
					return;
				}
				$('#classUnitTable').append("<tr id='"+$("#classTypeId").val()+"'></tr>");
				$("#classUnitTable")
						.find("tr:last")
						.append(
								"<td class=\"tablecolour2\">"
										+ $("#classTypename").val()
										+ "</td><td title='limit' class=\"tablecolour2\">"
										+ $("#upperLimit").val()
										+ "</td><td class=\"tablecolour2\"  style=\"cursor:pointer\""
										+ "  onclick=\"doDeletClassType('"
										+ $("#classTypeId").val() + "','"+ $("#classTypename").val() +"');\">Del</td>");
				$("#classTypeList option:selected").remove();
				$("#classTypeId").val("");
				$("#classTypename").val("");
				$("#upperLimit").val("");
	    }
		function doDeletClassType(clsId,clsName){
			   var toption="<option value='"+clsId+"'>"+clsName+"</option>";
			   $("#classTypeList").append(toption); 
			   $("#"+clsId).remove();
		}
		function doSave() {
		        var custr="";
		        $("#classUnitTable tr[id]").each( function() {
				    custr=custr+($(this).attr("id"))+","
				    +($(this).find("td[title='limit']").html())+";";
				});
				$("#classUnitString").val(custr);
		        $('#editForm').submit();
	    };
		function goBack() {
			location.href = '<s:url value="/customer/PersonalTouch/list"/>';
		}
		$( function() {
		    $('#editForm').validate();
			if ($.trim($('#result').text()) != '') {
				popupDiv('pop-div');
			};
			$('#validStartTime').datepicker( {dateFormat :'yy-mm-dd'});
		    $('#validEndTime').datepicker( {dateFormat :'yy-mm-dd'});
		    $('#deferStartTime').datepicker( {dateFormat :'yy-mm-dd'});
		    $('#deferEndTime').datepicker( {dateFormat :'yy-mm-dd'});
		    $('#punishStartTime').datepicker( {dateFormat :'yy-mm-dd'});
		    $('#punishEndTime').datepicker( {dateFormat :'yy-mm-dd'});
		    $('#originalClassTime').datepicker( {dateFormat :'yy-mm-dd'});
			$("#selCourse").change(function(){
		                  var  selCourse=$("#selCourse option:selected").val();
		                  if (!selCourse){
		                    return ;
		                  }
		                  $.blockUI({ css: { 
		                    border: 'none', 
		                    padding: '15px', 
		                    backgroundColor: '#000', 
		                    '-webkit-border-radius': '10px', 
		                    '-moz-border-radius': '10px', 
		                    opacity: .5, 
		                    color: '#fff' 
		                  }}); 
		                  var curdate=$('#curDate').attr('value');
		                  var url = "<s:url value="/data/Course/selectCourseAjax.action"/>";
		                  var params = {
		                      id:selCourse
		                  };
		                  jQuery.post(url, params, callbackFun);
		             });	
		});
		 function callbackFun(data)
	      {
	             setTimeout($.unblockUI, 500); 
	             $("#classTypeId").val("");
			     $("#classTypename").val("");
			     $("#upperLimit").val("");
	             $('#classTypeList').empty()
	                 .append('<option value="">--- Please Select ---</option>')
	                 .find('option:first')
	                 .attr("selected","selected");
	              $(data).find('response>classtype').each(function(){
	                  var d=eval("("+$(this).text()+")"); 
	                  var toption="<option value='"+d.id+"'>"+d.name+"</option>";
	                  $('#classTypeList').append(toption);
	       　　　　　　 });
	              $('#classUnitTable').find("tr:gt(0)").remove();
	              $(data).find('response>classunit').each(function(){
	                  var d=eval("("+$(this).text()+")"); 
	                  $('#classUnitTable').append("<tr id='"+d.id+"'></tr>");
		              $("#classUnitTable")
					  .find("tr:last")
					  .append(
							"<td class=\"tablecolour2\">"
									+ d.name
									+ "</td><td title='limit' class=\"tablecolour2\">"
									+ d.limit
									+ "</td><td class=\"tablecolour2\"  style=\"cursor:pointer\""
									+ "  onclick=\"doDeletClassType('"
									+ d.id + "','"+ d.name +"');\">Del</td>");
	       　　　　　　 });
	　　　      };
	
</script>
		<s:head />
		<title><s:text name="system.title" /></title>
	</head>
	<body>
		<s:include value="/common/up.jsp"></s:include>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td class="box">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td id="tag-over">
								<span id="tag-over">Leads</span>
							</td>
							<td class="tab3-line" width="90%">
								&nbsp;
							</td>
						</tr>
					</table>
					<s:form action="PersonalTouch/saveStudent" namespace="/customer"
						method="post" id="editForm" name="editForm">
						<s:hidden name="id"></s:hidden>
						<table width="100%" border="0" cellpadding="3" cellspacing="1"
							class="margin">
							<tr>
								<td align="right" class="tablecolour5">
									Name:
								</td>
								<td class="tablecolour5">
									<s:property value="name" />
									&nbsp;&nbsp; VIP
									<s:checkbox name="isVIP" cssClass="input2" />
								</td>
								<td align="right" class="tablecolour5">
									Elite Card:
								</td>
								<td class="tablecolour5">
									<s:property value="eliteCard" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Telephone:
								</td>
								<td class="tablecolour5">
									<s:textfield name="telephone" cssClass="input2" size="24" />
								</td>
								<td align="right" class="tablecolour5">
									Mobile:
								</td>
								<td class="tablecolour5">
									<s:textfield name="mobileTelephone" cssClass="input2" size="24" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Company Telephone:
								</td>
								<td class="tablecolour5">
									<s:textfield name="companyTelephone" cssClass="input2"
										size="24" />
								</td>
								<td align="right" class="tablecolour5">
									Other Telephone:
								</td>
								<td class="tablecolour5">
									<s:textfield name="otherTelephone" cssClass="input2" size="24" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Begin:
								</td>
								<td class="tablecolour5">
									<s:date name="validStartTime" format="yyyy-MM-dd"
										var="validStartTimefmt" />
									<s:textfield value="%{#validStartTimefmt}" id="validStartTime"
										name="validStartTime" cssClass="input2" size="10" />
								</td>
								<td align="right" class="tablecolour5">
									End:
								</td>
								<td class="tablecolour5">
									<s:date name="validEndTime" format="yyyy-MM-dd"
										var="validEndTimefmt" />
									<s:textfield value="%{#validEndTimefmt}" id="validEndTime"
										name="validEndTime" cssClass="input2" size="10" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Defer StartDate
								</td>
								<td class="tablecolour5">
									<s:date name="deferStartTime" format="yyyy-MM-dd"
										var="deferStartTimefmt" />
									<s:textfield value="%{#deferStartTimefmt}" id="deferStartTime"
										name="deferStartTime" cssClass="input2" size="10" />
								</td>
								<td align="right" class="tablecolour5">
									Defer EndDate
								</td>
								<td class="tablecolour5">
									<s:date name="deferEndTime" format="yyyy-MM-dd"
										var="deferEndTimefmt" />
									<s:textfield value="%{#deferEndTimefmt}" id="deferEndTime"
										name="deferEndTime" cssClass="input2" size="10" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Current Level:
								</td>
								<td class="tablecolour5">
									<s:select name="selClassLevelId" list="classLevelList"
										headerKey="" headerValue="--select--" />
									<br/>Finish Original Interview
									<s:checkbox name="finishedOriginalInterview" cssClass="input2" />
									<br/>Finish OriginalClass Time 
									<s:date name="originalClassTime" format="yyyy-MM-dd"
										var="originalClassTimefmt" />
									<s:textfield value="%{#originalClassTimefmt}" id="originalClassTime"
										name="originalClassTime" cssClass="input2" size="10" />
								</td>
								<td align="right" class="tablecolour5">
									Net Course Level:
								</td>
								<td class="tablecolour5">
									<s:select name="netLevel"
										list="{1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16}" headerKey=""
										headerValue="--select--" />
									<s:select name="netLevelUnit" list="{1,2,3,4,5,6,7,8}"
										headerKey="" headerValue="--select--" />
									Need Judge
									<s:checkbox name="needJudgeNetLevel" cssClass="input2" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Course Name:
								</td>
								<td class="tablecolour5">
									<s:select id="selCourse" name="selCourseId" list="courseList"
										headerKey="" headerValue="--select--" />
									<br>
									Free F2F
									<s:textfield name="freeF2FCount" cssClass="input2" size="24" />
								</td>
								<td class="tablecolour5" colspan='2'>
									<table width="80%" border="0">
										<tr>
											<td align="center" class="tablecolour5">
												<s:updownselect list="optionalClassTypeList"
													id="classTypeList" name="optionalClassType" headerKey="-1"
													headerValue="--- Please Select ---" listKey="id"
													listValue="name" emptyOption="false" allowMoveDown="false"
													allowMoveUp="false" cssStyle="WIDTH: 200px; HEIGHT: 150px"
													allowSelectAll="false" onclick="doSelectClassType();" />
											</td>
											<td align="center" class="tablecolour5">
												<table>
													<tr>
														<td>
															Select ClassType:
														</td>
													</tr>
													<tr>
														<td>
															<input type="text" id="classTypename" size="20">
															<input type="hidden" id="classTypeId" size="20">
														</td>
													</tr>
													<tr>
														<td>
															Upper Limit:
														</td>
													</tr>
													<tr>
														<td>
															<input type="text" id="upperLimit" size="20">
														</td>
													</tr>
													<tr>
														<td>
															<input type="hidden" id="classUnitString"
																name="classUnitString">
															<input type="button" onclick="doAddClassUnit();"
																value="Add">
														</td>
													</tr>
												</table>
											</td>
											<td class="tablecolour5">
												<table id="classUnitTable" align="center" width="100%"
													border="0" cellpadding="0" cellspacing="1" class="box2">
													<tr>
														<td class="tablecolour1">
															ClassType
														</td>
														<td class="tablecolour1">
															Limit
														</td>
														<td class="tablecolour1">
															Function
														</td>
													</tr>
													<s:iterator value="selectClassUnitList" status="status">
														<tr id="<s:property value="classType.id" />">
															<td class="tablecolour2">
																<s:property value="classType.name" />
															</td>
															<td title="limit" class="tablecolour2">
																<s:property value="updateLimitTimes" />
															</td>
															<td class="tablecolour2" style="cursor: pointer"
																onclick="doDeletClassType(<s:property value="classType.id" />,
															 '<s:property value="classType.name" />');">
																Del
															</td>
														</tr>
													</s:iterator>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Need Punish
									<s:checkbox name="needPunish" cssClass="input2" />
								</td>
								<td class="tablecolour5">
									StartDate
									<s:date name="punishStartTime" format="yyyy-MM-dd"
										var="punishStartTimefmt" />
									<s:textfield value="%{#punishStartTimefmt}"
										id="punishStartTime" name="punishStartTime" cssClass="input2"
										size="10" />
									<br />
									EndDate
									<s:date name="punishEndTime" format="yyyy-MM-dd"
										var="punishEndTimefmt" />
									<s:textfield value="%{#punishEndTimefmt}" id="punishEndTime"
										name="punishEndTime" cssClass="input2" size="10" />
								</td>
								<td class="tablecolour5">
									Cancel Times
									<s:textfield name="cancelTimes" cssClass="input2" size="10" />
								</td>
								<td class="tablecolour5">
									Cancel Times In Week
									<s:textfield name="cancelTimesInWeek" cssClass="input2"
										size="10" />
								</td>
							</tr>
							<tr>
								<td align="center" height="50" class="tablecolour5" colspan="5">
									<input type="button" class="btn1" value="Save"
										onclick="doSave();" />
									<input name="goback" type="button" class="btn1" value="Go Back"
										onclick="goBack()" />
								</td>
							</tr>
						</table>
					</s:form>
				</td>
			</tr>
		</table>
		<s:include value="/common/down.jsp"></s:include>
		<div id='pop-div' style="width: 300px;" class="pop-box">
			<s:include value="/common/confirm.jsp"></s:include>
		</div>
	</body>
</html>